<script setup lang='ts'>
let socket: WebSocket
let testData = reactive<Array<string>>([])
let inputValue = ref<string>('我是朱德明')
onMounted(() => {
  socket = new WebSocket('ws://192.168.180.7:8080/ws')
  // Connection opened
  socket.onopen = () => {
    console.log('@@@');

    socket.send('你好！')
  }

  // Listen for messages
  socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
    testData.push(event.data)
  });
})

const handleClick = () => {
  socket.send(inputValue.value)
  inputValue.value = ''
}
</script>

<template>
  <div class="out_wrap">
    <div class="box">
      <p class="title">🤭🤭🤭🤭🤭</p>
      <n-scrollbar style="max-height: 480px;border: solid 1px #dddddd;margin-top: 10px;border-radius: 10px;">
        <div class="content">
          <p v-for="item in testData">{{ item }}</p>
        </div>
      </n-scrollbar>
      <div class="bottom_box">
        <n-input v-model:value="inputValue" @keydown.enter="handleClick" />
        <n-button type="info" @click="handleClick" style="width:100%;height:50px">发送send Socket</n-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.out_wrap {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .box {
    width: 400px;
    height: 600px;
    padding: 20px;
    border: solid 1px #dddddd;
    border-radius: 10px;
    position: relative;
    overflow: hidden;

    .content {
      width: 100%;
    }

    .bottom_box {
      width: 100%;
      height: 84px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-top: solid 1px #dddddd;
    }
  }

}
</style>